SGA.View = function(){
    this.cmpArray = [];
    
    this.createLoginScreen();
    this.createSchedCarousel();
    this.createDetailsScreen();
    this.createBackButton();
    this.createLogoutButton();
    this.createCalendarModal();
    this.createCalendarButton();
    this.createConfButton();
    this.createBotToolbar();
    this.createTopToolbar();
    this.createMainScreen();
};

SGA.View.prototype.createMainScreen = function(){
    var p = new Ext.Panel({
        fullscreen: true,
        layout:'card',
        activeItem: 0,
        cardSwitchAnimation:{type:'slide'},
        dockedItems: [
            this.getCmp('topToolbar'),
            this.getCmp('botToolbar')
        ],
        items:[
            this.getCmp('loginScreen'),
            this.getCmp('schedCarousel'),
            this.getCmp('detailsScreen')
        ]
    });
    
    this.addCmp('mainScreen', p);
    return p;
};

SGA.View.prototype.createTopToolbar = function(){
    var t = new Ext.Toolbar({
        cls:'tlbar',
        dock:'top',
        title:'SGA - Login',
        items:[
            this.getCmp('backButton'),
            {xtype:'spacer'},
            this.getCmp('logoutButton')
        ]
    });
    
    this.addCmp('topToolbar', t);
    return t;
};

SGA.View.prototype.createBackButton = function(){
    var b = new Ext.Button({
        iconCls:'back',
        iconMask: true,
        ui:'plain',
        hidden: true,
        handler: function(){
            SGA.ct.returnScreen();
        }
    });
    
    this.addCmp('backButton', b);
    return b;
};
SGA.View.prototype.showBackButton = function(){
    this.getCmp('backButton').show();
};
SGA.View.prototype.hideBackButton = function(){
    this.getCmp('backButton').hide();
};
SGA.View.prototype.createLogoutButton = function(){
    var b = new Ext.Button({
        text:'Logout',
        hidden: true,
        ui:'decline-small',
        handler: function(){
            Ext.Msg.confirm('Sair do sistema', 'Tem certeza de que deseja sair?', function(text){
                if(text=='yes'){
                    SGA.ct.logout();
                }
            });            
        }
    });
    
    this.addCmp('logoutButton', b);
    return b;
};
SGA.View.prototype.showLogoutButton = function(){
    this.getCmp('logoutButton').show();
};
SGA.View.prototype.hideLogoutButton = function(){
    this.getCmp('logoutButton').hide();
};

SGA.View.prototype.changeToolbarTitle = function(a){
    this.getCmp('topToolbar').setTitle(a);
}

SGA.View.prototype.createBotToolbar = function(){
    var t = new Ext.Toolbar({
        cls:'tlbar bottom',
        dock:'bottom',
        items: [
            {xtype:'spacer'},
            this.getCmp('confButton'),
            this.getCmp('calButton')
        ]
    });
    
    this.addCmp('botToolbar', t);
}
SGA.View.prototype.createCalendarButton = function(){
    var b = new Ext.Button({
        iconCls: 'calendar',
        iconMask: true,
        ui: 'plain',
        hidden: true,
        handler: function(){
            SGA.view.showCalendarModal();
        }
    });
    
    this.addCmp('calButton', b);
    return b;
};
SGA.View.prototype.showCalButton = function(){
    this.getCmp('calButton').show();
};
SGA.View.prototype.hideCalButton = function(){
    this.getCmp('calButton').hide();
};

SGA.View.prototype.createConfButton = function(){
    var b = new Ext.Button({
        iconCls: 'confirm',
        cls:'btn',
        iconMask: true,
        text:'Confirmar presença',
        //ui: 'plain',
        hidden: true,
        handler: function(){
            var data = SGA.view.getCmp('detailsScreen').data;
            SGA.ct.checkAuthentication(data);
        }
    });
    
    this.addCmp('confButton', b);
    return b;
};
SGA.View.prototype.showConfButton = function(){
    this.getCmp('confButton').show();
};
SGA.View.prototype.hideConfButton = function(){
    this.getCmp('confButton').hide();
};

SGA.View.prototype.createLoginScreen = function(){
    var p = new Ext.Panel({
        id:'loginScreen',
        items:[{
            xtype:'fieldset',
            items:[{
                xtype:'field',
                id:'loginField',
                label:'Login'
            },{
                xtype:'passwordfield',
                id:'passwordField',
                label:'Senha'
            }]
        },{
            xtype:'button',
            text:'Entrar',
            handler: function(){
                SGA.ct.login();
                //SGA.ct.changeScreen('schedCarousel');
            }
        }],
        listeners:{
            show: function(){
                SGA.view.changeToolbarTitle('SGA - Login');
            }
        }
    });
    
    this.addCmp('loginScreen', p);
    return p;
};

SGA.View.prototype.createSchedCarousel = function(){
 
    var c = new Ext.Carousel({
        id:'schedCarousel',
        items: this.getSchedLists(),
        listeners:{
            show: function(dis){
                var day = dis.items.items[0].items.items[0].store.data.items[0].data.dia;
                SGA.view.changeToolbarTitle(day);
            },
            cardswitch: function(dis, newCard){
                var day = newCard.items.items[0].store.data.items[0].data.dia;
                SGA.view.changeToolbarTitle(day);
            }
        }
    });
    
    this.addCmp('schedCarousel', c);
    return c;
};
SGA.View.prototype.changeCarouselPage = function(idx){
    this.getCmp('schedCarousel').setActiveItem(idx);
};

SGA.View.prototype.getSchedLists = function(){
    var data = SGA.mod.getSchedData(),
        lists = [],
        tpl = '<tpl for="."> <div> <span> {horario} </span> - <span> {nome} </span> </div> </tpl>';
    
    for(var i = 0; i < data.length; i++){
        
        var s = SGA.mod.createSchedStore(data[i]);        
        var l = this.createSchedList(s, tpl);
        var p = this.createBasePanel();
        p.add(l);
        
        lists.push(p);
    }
    
    return lists;
};

SGA.View.prototype.createBasePanel = function(){
    var p = new Ext.Panel({
        
    });
    
    return p;
};

SGA.View.prototype.createSchedList = function(store, tpl){
    var l = new Ext.List({
        store: store,
        itemTpl: tpl,
        disableSelection: true,
        cls:'schedList',
        listeners:{
            itemtap: function(a, b){
                var data = a.store.data.items[b].data;
                SGA.view.getCmp('detailsScreen').data = data;
                SGA.ct.updateDetailsScreen();
                SGA.ct.changeScreen('detailsScreen');
            }
        }
    });
    
    return l;
};

SGA.View.prototype.createDetailsScreen = function(){
    var p = new Ext.Panel({
        id:'detailsScreen',
        scroll:'vertical',
        html: 'lorem ipsum'
    });
    
    this.addCmp('detailsScreen', p);
    return p;
};

SGA.View.prototype.createCalendarModal = function(){
    var p = new Ext.Panel({
        modal:true,
        centered: true,
        floating: true,
        showAnimation: 'fade',
        cls: 'calPanel',
        items:[{
            xtype:'panel',
            id:'calendar'
        }]
    });  
    
    this.addCmp('calModal', p);
    return p;
};

SGA.View.prototype.showCalendarModal = function(){
    
    this.getCmp('calModal').show();
    
    if(!this.calendarObject){
        this.calendarObject = new JsDatePick({
            useMode:1,
            isStripped:true,
            target:'calendar',
            cellColorScheme:'orange'
        });	
    }
    
    this.calendarObject.setOnSelectedDelegate(function(){
        var obj = SGA.view.calendarObject.getSelectedDay();
        var date = obj.day + ' ' + g_l.MONTHS[obj.month-1];
        var d = SGA.mod.getSchedData();
        
        for(var i = 0; i < d.length; i++){
            if (d[i][0].dia == date){
                SGA.view.getCmp('calModal').hide();
                SGA.view.changeCarouselPage(i);
                return;
            }
        }
        SGA.view.getCmp('calModal').hide();
        
        Ext.Msg.alert('Dia livre', 'Este dia não possui eventos registrados', function(){
            SGA.view.getCmp('calModal').show();
        });
    });
};

SGA.View.prototype.addCmp = function(name, cmp){
    for(var i  = 0; i < this.cmpArray.length; i++){
        var cmpName = this.cmpArray[i].name;
        if(cmpName == name){
            console.warn('Trying to add a component with a repeated name: maybe trying to recreate it?');
            return;
        }
    }
    console.log('Component successfully added: ' + name);
    this.cmpArray.push({name:name, cmp:cmp});
};

SGA.View.prototype.getCmp = function(a){
    for(var i = 0; i < this.cmpArray.length; i++){
        var cmpName = this.cmpArray[i].name;
        if(cmpName == a)
            return this.cmpArray[i].cmp;
    }
    console.warn('Couldn\'t find the component: ' + a);
    return null;
};